Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at creating transition effects between components and lists.
Transitioning Between Components
We can transition between components with the transition and component components.
The component component is used for switching between components dynamically by setting their name.
For instance, we can use it by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.bounce-enter-active {
animation: bounce-in 1.3s;
}
.bounce-leave-active {
animation: bounce-in 1.3s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="currentComponent = 'foo'">foo</button>
<button @click="currentComponent = 'bar'">bar</button>
<button @click="currentComponent = 'baz'">baz</button>
<transition name="bounce" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
<script>
const app = Vue.createApp({
data() {
return {
currentComponent: "foo"
};
},
components: {
foo: {
template: "<div>foo</div>"
},
bar: {
template: "<div>bar</div>"
},
baz: {
template: "<div>baz</div>"
}
}
});
app.mount("#app");
</script>
</body>
</html>
We created 3 components, foo , bar and baz .
And we to transition between them, we created 3 buttons to change the component names.
We also have the name prop and to set transition name.
And we also have the transition styles in the style tag.
When we click the buttons, we’ll see a transition effect before we see the content of the new component.
List Transitions
We can add transition effects to lists.
To do this, we can use the transition-group component.
Unlike transition , it renders the actual element.
A span is rendered by default.
We can change this with the tag attribute.
Transition modes aren’t available since we aren’t alternating between mutually exclusive elements.
Elements inside are always required to have a unique key attribute.
CSS transitions classes will be applied to inner elements and not to the container itself.
List Entering/Leaving Transitions
We can add a list enter or leave transitions with the transition-group component.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateY(35px);
}
</style>
</head>
<body>
<div id="app">
<button @click="add">Add</button>
<button @click="remove">Remove</button>
<transition-group name="list" tag="div">
<p v-for="item in items" :key="item">
{{ item }}
</p>
</transition-group>
</div>
<script>
const app = Vue.createApp({
data() {
return {
items: Array(10)
.fill()
.map(() => Math.random()),
nextNum: 10
};
},
methods: {
randomIndex() {
return Math.floor(Math.random() * this.items.length);
},
add() {
this.items.splice(this.randomIndex(), 0, Math.random());
},
remove() {
this.items.splice(this.randomIndex(), 1);
}
}
});
app.mount("#app");
</script>
</body>
</html>
We created a list from an array of random numbers.
And we added the add and remove buttons to let us add and remove items.
The transition effects are in the style tags.
The effects we added is the opacity change and vertical translation effects.
In the template, we have the transition-group component with the name prop set to list to make that the prefix of the transition class names.
tag is the tag we render for the container.
We added the key prop as required in the p element, which is rendered from the items list.
This way, Vue can tell where each item is and animate them correctly.
Finally, we have the add and remove methods to let us add and remove items from the items array.
randomIndex generates a random index to add or remove items.
Now when we click add or remove, we’ll see the transition effects applied.
Conclusion
We can transition between components and add transition effects to list items.
